﻿@page "/components/highlighter"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="MudHighlighter">
        <Description>
            Use this utility component to highlight parts of the text.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader>
                <Title>Use it in combination with other components</Title>
                <Description>Example with a MudList</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <HighlighterWithListExample />
            </SectionContent>
            <SectionSource Code="HighlighterWithListExample" GitHubFolderName="Highlighter" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title></Title>
                <Description>Example with a MudTable</Description>
            </SectionHeader>
            <SectionContent FullWidth="true" DarkenBackground="true">
                <HighlighterWithTableExample />
            </SectionContent>
            <SectionSource Code="HighlighterWithTableExample" GitHubFolderName="Highlighter" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Give it the style you want</Title>
                <Description>Style it with the Class or Style properties</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <HighlighterWithCustomStyleExample />
            </SectionContent>
            <SectionSource Code="HighlighterWithCustomStyleExample" GitHubFolderName="Highlighter" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Highlight full words or choose if it should be case sensitive </Title>
                <Description>Set the <code class="docs-code docs-code-primary">UntilNextBoundary</code> property to true if you want to highlight the text until the next regex boundary occurs, or the <code class="docs-code docs-code-primary">CaseSensitive</code> property to decide if you want to perform a case sensitive highlight </Description>
            </SectionHeader>
            <SectionContent FullWidth="true" DarkenBackground="true">
                <HighlighterUntilNextBoundaryExample />
            </SectionContent>
            <SectionSource Code="HighlighterUntilNextBoundaryExample" GitHubFolderName="Highlighter" />
        </DocsPageSection>


    </DocsPageContent>
</DocsPage>